<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import { onBeforeMount, ref } from 'vue';
  import EventCard from '@/components/event-card/index.vue';

  const appStore = useAppStore();

  onBeforeMount(() => {
    appStore.updateSettings({
      menu: false,
    });
  });

  const eventList = ref([
    {
      id: 1,
      name: '赛事1',
      status: 'open',
    },
    {
      id: 2,
      name: '赛事1',
      status: 'draft',
    },
  ]);
</script>

<template>
  <div class="main">
    <a-row :gutter="[30, 30]">
      <a-col>
        <div class="approve">
          <a-row align="center" justify="space-between">
            <a-col flex="none">
              <a-tag color="blue">新培训机构入驻</a-tag>
            </a-col>
            <a-col flex="none">
              <a-space>
                <a-button type="primary">审核通过</a-button>
                <a-button status="danger">审核不通过</a-button>
              </a-space>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col>
        <a-divider style="margin: 0" />
      </a-col>
      <a-col>
        <div class="header">
          <img src="https://img95.699pic.com/xsj/11/8l/q7.jpg%21/fh/300" />
          <div>万华高尔夫俱乐部</div>
          <span>ID: 23923</span>
        </div>
      </a-col>

      <a-col>
        <div class="section-title">培训机构介绍</div>
        <a-row :gutter="50">
          <a-col :span="18">
            <div class="common-text">
              北京万柳置业集团有限公司、中国新纪元有限公司和中国希格玛有限公司强强联手，共同投资创办的北京万柳高尔夫俱乐部，有强大的投资实力作为保障，秉承国际化服务和管理理念，成为京城最具竞争力的都市俱乐部。
              北京万柳高尔夫俱乐部与北京高新科技园区——中关村、世界上保存最完整的皇家园林——颐和园、国内外享誉盛名的著名学府——北大、清华为邻，呈经济、环境与人文三龙吐珠之势，交通便利，景色宜人，蕴含着千年的文化积淀。起伏跌宕的大西山背景和烟波浩淼的昆明湖水影构建的远景框架，在都市的繁华和自然美景间开辟出了一块与众不同的高球乐土，让人犹如置身于一个如梦似幻的都市桃花源之中。北京万柳高尔夫俱乐部由一座18洞国际锦标级球场和一座9洞灯光球场组成，美国景观公司对其进行概念设计，加强了球场的景观效果；北京世纪联合高尔夫俱乐部管理公司结合场地内部水体和建筑效果，完成施工设计。北京世纪联合高尔夫俱乐部管理公司在经营管理的过程中，将万柳高尔夫定位于“都市商务型专属俱乐部”，注重球场的商务特性和文化特色，为会员提供尽善尽美的会员权益和增值服务。
            </div>

            <div class="basic-info-group">
              <div class="basic-info-item">
                <span class="icon"><icon-user /></span>
                <span class="label">负责人：</span>
                <span>王刚</span>
              </div>
              <div class="basic-info-item">
                <span class="icon"><icon-phone /></span>
                <span class="label">联系方式：</span>
                <span>18899990012</span>
              </div>
              <div class="basic-info-item">
                <span class="icon"><icon-location /></span>
                <span class="label">详细地址：</span>
                <span>北京市海淀区北四环西路76号四环辅路中关村</span>
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="pic-album">
              <div class="pic-album-empty"> 暂无 </div>
              <div class="pic-album-name">图集(3张)</div>
            </div>
          </a-col>
        </a-row>
      </a-col>

      <a-col>
        <div class="section-title">汇款信息</div>
        <div class="basic-table" style="width: 500px">
          <table :cellpadding="0" :cellspacing="0">
            <tr>
              <td class="label">开户行</td>
              <td>北京银行双榆树支行</td>
            </tr>
            <tr>
              <td class="label">银行账号</td>
              <td>3612091273872837</td>
            </tr>
            <tr>
              <td class="label">户主</td>
              <td>王刚</td>
            </tr>
          </table>
        </div>
      </a-col>

      <a-col>
        <div class="section-title">教练</div>

        <div>
          <a-table :data="eventList" size="small" :bordered="{ cell: true }">
            <template #columns>
              <a-table-column title="赛事" :width="350" fixed="left">
                <template #cell="{ record }">
                  <EventCard :status="record.status" />
                </template>
              </a-table-column>
              <a-table-column title="比赛进程" :width="100">
                <template #cell>未开赛</template>
              </a-table-column>
              <a-table-column title="球场/执行机构" :width="300">
                <template #cell>
                  <div> <icon-relation />球场： 南山滑雪场 </div>
                  <div> <icon-calendar />执行机构：北大学生会 </div>
                </template>
              </a-table-column>
              <a-table-column title="地区" :width="200">
                <template #cell> 中部/河南/郑州 </template>
              </a-table-column>
              <a-table-column title="开赛时间" :width="150">
                <template #cell> 2023年10月10日 08:00 </template>
              </a-table-column>
              <a-table-column title="公布时间" :width="150">
                <template #cell> 2023年10月01日 08:00 </template>
              </a-table-column>
              <a-table-column title="报名人数" :width="150">
                <template #cell>
                  <span style="color: rgb(var(--red-5))">389</span>/300
                </template>
              </a-table-column>
              <a-table-column
                title="操作"
                :width="100"
                fixed="right"
                align="center"
              >
                <template #cell>
                  <a-dropdown>
                    <a-button>
                      <template #icon><icon-settings /></template>
                      设置
                    </a-button>
                    <template #content>
                      <!-- <a-doption @click="goToDetail(record.id)">详情</a-doption> -->
                      <!-- <a-doption>成绩</a-doption> -->
                      <a-doption>公布</a-doption>
                      <a-doption disabled>撤回</a-doption>
                      <a-doption>删除</a-doption>
                    </template>
                  </a-dropdown>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
  .main {
    width: 1100px;
    margin: 30px auto;
    background: #fff;
    padding: 20px;
  }

  .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    img {
      max-height: 32px;
      margin-right: 10px;
    }
    span {
      font-size: 14px;
      color: var(--color-text-2);
      font-weight: normal;
      margin-left: 10px;
    }
  }

  .common-text {
    line-height: 1.5;
    text-align: justify;
  }

  .basic-table {
    table {
      width: 100%;
      border: 1px solid var(--color-border-2);
      td {
        font-weight: 500;
        padding: 8px 10px;
        border-right: 1px solid var(--color-border-2);
        border-bottom: 1px solid var(--color-border-2);
        &:last-child {
          border-right: none;
        }
        &.label {
          width: 150px;
          background: rgb(var(--gray-1));
          font-weight: normal;
        }
      }
      tr:last-child {
        td {
          border-bottom: none;
        }
      }
    }
  }

  .basic-info-group {
    margin-top: 30px;
  }

  .basic-info-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    .icon {
      margin-right: 3px;
      color: var(--color-text-3);
    }

    .label {
      color: var(--color-text-1);
      width: 100px;
    }
  }

  .pic-album {
    cursor: pointer;
    border: 1px solid var(--color-border-2);

    &-empty {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-3);
    }

    &-name {
      line-height: 40px;
      padding: 0 10px;
      text-align: center;
      border-top: 1px solid var(--color-border-2);
      border-bottom: 1px solid var(--color-border-2);
    }
  }
</style>
